import React from 'react'
import { useState, useEffect, } from 'react'
import { Modal, Button, Form, Input, Radio, Switch, message, } from 'antd';
import type { FormInstance } from 'antd/es/form';
const { TextArea } = Input;
import axios from 'axios'
import "../index.less"
export default function EditData({ info, chooseNum, text }: any) {
    const [messageApi, contextHolder] = message.useMessage();
    const [hideEdit, setHideEdit] = useState(false);
    const [initialValuesEdit, setInitialValuesEdit] = useState({});
    const [detailValueEdit, setDetailValueEdit] = useState<any>(info.detail);
    const [openEdit, setOpenEdit] = useState(false);
    const [detailIMGValueEdit, setDetailIMGValueEdit] = useState<any>(info.detailIMG);
    const formRef = React.useRef<FormInstance>(null);
    useEffect(() => {
        onFillEdit(chooseNum)
    });

    const onFillEdit = (num: number) => {
        let defaultCategory = String(info.category)
        let defaultShopIMG = info.shopIMG;
        defaultShopIMG = JSON.stringify(defaultShopIMG);
        let defaultDetail = info.detail;
        defaultDetail = JSON.stringify(defaultDetail);
        let defaultDetailIMG = info.detailIMG;
        defaultDetailIMG = JSON.stringify(defaultDetailIMG);
        let defaultComments = info.comments;
        defaultComments = JSON.stringify(defaultComments);
        let defaultValue = {
            id: info.id,
            category: defaultCategory,
            shopName: info.shopName,
            shopPicture: info.shopPicture,
            icon: info.icon,
            babyDescription: info.babyDescription,
            sellerService: info.sellerService,
            logisticsService: info.logisticsService,
            shopIMG: defaultShopIMG,
            commodityName: info.commodityName,
            description: info.description,
            sales: info.sales,
            price: info.price,
            nowPrice: info.nowPrice,
            detail: defaultDetail,
            detailIMG: defaultDetailIMG,
            comments: defaultComments,
        }

        let shopIMGToString: any = ["http://shop.graceman.com.cn/upload/20140114/20140114115733.jpg", "http://shop.graceman.com.cn/upload/20140114/20140114115739.jpg", "http://shop.graceman.com.cn/upload/20140114/20140114115747.jpg"]
        shopIMGToString = JSON.stringify(shopIMGToString);
        let detailToString: any = {
            生产日期: '2020年03月18日',
            品牌: '晚歌',
            系列: '城堡',
            产地: '法国',
            糖分: '干葡萄酒 （含糖量小于4克/升）',
            香味: '果香',
            包装种类: '瓶装',
            商品规格: '6x2x750ml',
            葡萄酒种类: '红葡萄酒',
            葡萄酒等级: '一等品',
            醒酒时间: '15分钟(含)-30分钟(不含)',
            搭配菜肴: '红肉/野味/陈乳酪',
            // 红肉/野味/陈乳酪: '整箱装',
            葡萄品种: '美乐/梅洛 赤霞珠',
            进口类型: '原汁进口',
            储存条件: '常温',
            采摘年份: '2018-10',
            厂名: '法国新阳光海岸酒庄',
            厂址: '法国',
            厂家联系方式: '4000896311',
            配料表: '葡萄汁，二氧化硫',
            储藏方法: '常温，避光，卧放',
            保质期: '10年',
            食品添加剂: '无'
        }
        detailToString = JSON.stringify(detailToString);
        let detailIMGToString: any = [
            "https://img.alicdn.com/imgextra/i2/1796875493/O1CN01jalFYM1qRqPLhASs8_!!1796875493.jpg",
            "https://img.alicdn.com/imgextra/i3/1796875493/O1CN01VHtQ3X1qRqOAIPnHR_!!1796875493.jpg",
            "https://img.alicdn.com/imgextra/i1/1796875493/O1CN01pH8fma1qRqPTKZuz8_!!1796875493.jpg",
            "https://img.alicdn.com/imgextra/i2/1796875493/O1CN01ssYW8C1qRqMWjixj2_!!1796875493.jpg",
            "https://img.alicdn.com/imgextra/i1/1796875493/O1CN012DdPcd1qRqNzYFM5O_!!1796875493.jpg"
        ]
        detailIMGToString = JSON.stringify(detailIMGToString);
        let commentsToString: any = [
            {
                "userIcon": "http://sns.m.taobao.com/avatar/sns/user/flag/sns_logo?type=taobao&kn=wwc_tb_11&bizCode=taobao_avatar&userFlag=RAzN84GK7wS8eNduDntv2nDbfvYtZaZj519os2JqKHygEiWfFDeGEMqHBTr4x9ZZn7AEA3AQtrruCBFA5eKdiCZUbp6bTUuSbd2GsXkKMPWVhjBaT3e8ChxYsykAuNh1cADN13PTBTPCJaGWFc2rjfy7nD7RhrkbuioAbS1",
                "userName": "星光没你灿烂",
                "userTime": "1个月前",
                "shopCategory": "13瓶帕拉马",
                "userCommont": "红酒一如既往的正品，好喝，每年都要买几箱，这是今年的第四箱啦。还送了专业的倒酒器和瓶盖，方便随时平常。",
                "shopCommentsIMG": [
                    "https://gw.alicdn.com/imgextra/i4/O1CN01X0cJpK1h3Gc5s9bUD_!!0-rate.jpg_110x10000q90.jpg_.webp",
                    "https://gw.alicdn.com/imgextra/i3/O1CN01PIi2iL1h3GcDBfSc1_!!0-rate.jpg_110x10000q90.jpg_.webp",
                    "https://gw.alicdn.com/imgextra/i3/O1CN014o2LCt1s8GiI44d4s_!!0-rate.jpg_110x10000q90.jpg_.webp"
                ],
                "reply": "感谢您对雍天的支持与认可，我们会不断努力，带来更多高性价比的优质好酒以及更细心更便捷的服务,期待您的下次光临哦！",
                "views": 368
            },
            {
                "userIcon": "http://img.alicdn.com/tps/TB1l6dkOXXXXXXEXVXXXXXXXXXX-210-210.png_70x70.jpg",
                "userName": "汤师爷",
                "userTime": "18天前 ",
                "shopCategory": "13瓶帕拉马",
                "userCommont": "红酒已经收到，宝贝完好无损，为掌柜和快递点赞，用餐巾纸法和小苏打法检测，红酒很好。刮开防伪码检测---通过。红酒口感不错，感觉比路易拉菲要好，真的谢谢！很好",
                "shopCommentsIMG": [],
                "reply": "",
                "views": 204
            }
        ]
        commentsToString = JSON.stringify(commentsToString);
        let templateValue = {
            id: "16403369",
            category: "1",
            shopName: '戈斯曼尚品干红葡萄酒',
            shopPicture: "https://gw.alicdn.com/imgextra//01/c5/TB1ZbRYvoY1gK0jSZFMSuuWcVXa.jpg_110x10000q50.jpg_.webp",
            icon: "http://shop.graceman.com.cn/upload/20140114/20140114093437.jpg",
            babyDescription: 4.9,
            sellerService: 4.9,
            logisticsService: 4.9,
            shopIMG: shopIMGToString,
            description: "本品以世界名种葡萄赤霞珠为原料，以独特之工艺发酵后，在酒窖中经橡木桶贮藏陈酿而成，酒体呈深宝石红色，果香馥郁，果香、酒香协调，入口醇香绵长，口感柔和圆润，典型性强。",
            commodityName: '14度法国进口',
            sales: 10002,
            price: 388,
            nowPrice: 278,
            detail: detailToString,
            detailIMG: detailIMGToString,
            comments: commentsToString,
        }

        if (num == 2) {
            formRef.current?.setFieldsValue(templateValue);
            return
        }
        formRef.current?.setFieldsValue(defaultValue);
    };
    const onChangeSwitch = (checked: boolean) => {
        setHideEdit(!hideEdit)
    };

    const onFinishEdit = (values: any) => {
        let params = {
            values: values
        }
        axios.post("http://localhost:8080/api/updateDetail", params).then((response) => {
            if (response.data.code === 200) {
                messageApi.open({
                    type: 'success',
                    content: '删除成功！',
                });
            }
        }).catch((err) => {
            messageApi.open({
                type: 'error',
                content: err.message,
            });
        });
        if (openEdit == true) {
            setOpenEdit(false);
        }
    };

    return (
        <div className='editData common'>
            <Form
                id="myForm"
                onFinish={onFinishEdit}
                ref={formRef}
                initialValues={initialValuesEdit}
            >
                <Form.Item label="商品id" name="id">
                    <Input />
                </Form.Item>
                <Form.Item label="商铺名称" name="shopName">
                    <Input />
                </Form.Item>
                <Form.Item label="商品名称" name="commodityName">
                    <Input />
                </Form.Item>
                <Form.Item label="葡萄酒分类" name="category">
                    <Radio.Group>
                        <Radio style={{ marginTop: "6px" }} value="1"> 原酒进口葡萄酒 </Radio>
                        <Radio value="2"> 原瓶进口葡萄酒 </Radio>
                        <br />
                        <Radio value="3"> 宁夏葡萄酒 </Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item label="商品图片" name="shopPicture">
                    <Input />
                </Form.Item>
                <Form.Item label="商品icon" name="icon">
                    <Input />
                </Form.Item>
                <Form.Item label="详情图片" name="shopIMG">
                    <Input />
                </Form.Item>
                <Form.Item label="商品原价" name="price">
                    <Input />
                </Form.Item>
                <Form.Item label="商品现价" name="nowPrice">
                    <Input />
                </Form.Item>
                <Form.Item label="商品描述" name="description">
                    <Input />
                </Form.Item>
                <Form.Item label="商品细节" name="detail">
                    <TextArea value={detailValueEdit} onChange={(e) => setDetailValueEdit(e.target.value)} autoSize={{ minRows: 3, maxRows: 5 }} rows={4} />
                </Form.Item>
                <Form.Item label="描述图片" name="detailIMG">
                    <TextArea value={detailIMGValueEdit} onChange={(e) => setDetailIMGValueEdit(e.target.value)} autoSize={{ minRows: 3, maxRows: 5 }} rows={4} />
                </Form.Item>
                <Form.Item label="隐藏内容" >
                    <Switch defaultChecked onChange={onChangeSwitch} />
                </Form.Item>
                {hideEdit ? (
                    <div>
                        <Form.Item label="宝贝描述" name="babyDescription">
                            <Input />
                        </Form.Item>
                        <Form.Item label="卖家服务" name="sellerService">
                            <Input />
                        </Form.Item>
                        <Form.Item label="物流服务" name="logisticsService">
                            <Input />
                        </Form.Item>
                        <Form.Item label="销量" name="sales">
                            <Input />
                        </Form.Item>
                        <Form.Item label="评论" name="comments">
                            <TextArea rows={4} />
                        </Form.Item>
                        <Button type="link" htmlType="button" onClick={() => onFillEdit(2)}>
                            一键填充
                        </Button>
                    </div>
                ) : (
                    <div hidden>Hidden Element</div>
                )}
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                        修改
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}
